<template>
  <!--显示所有的地址-->
  <div class="addrList">
    <div class="title">我的地址</div>
    <ul>
      <li v-for="(addr, index) in addrList" :key="index" @click="addrId = addr.id">
        <span class="contact" :class="{selectAddr: addr.id == addrId}">{{addr.contact}}</span>
        <span class="address">{{addr.contact}} {{addr.province}} {{addr.city}} {{addr.district}} {{addr.street}} {{addr.address}}</span>
      </li>
    </ul>
  </div>
  <!--显示所有选中的购物车-->
  <div class="cartList">
    <div class="title">我的商品</div>
    <ul>
      <li v-for="(cart, index) in cartList" :key="index">
        <el-row>
          <el-col :span="2" style="margin-right: 10px">
            <el-image
                :src="`${SERVER_ADDR}/goods/pic/${cart.goods.picList[0].url}`"
                style="width: 50px; height: 50px;"
                fit="contain"
            />
          </el-col>
          <el-col :span="3">{{cart.goods.name}}</el-col>
          <el-col :span="5">{{cart.goods.color}} - {{cart.goods.version}}</el-col>
          <el-col :span="1">{{cart.goods.price}}</el-col>
          <el-col :span="1">X{{cart.count}}</el-col>
          <el-col :span="3">总价：￥{{cart.goods.price * cart.count}}元</el-col>
        </el-row>
      </li>
    </ul>
  </div>
  <!--显示总金额和生成订单的金额-->
  <div class="footer">
    总金额: ￥<span class="total">{{total}}</span>元
    <el-button class="createOrder" type="danger" @click="createOrder">生成订单</el-button>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import addrApi from "@/api/addrApi.js";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import cartApi from "@/api/cartApi.js";
import orderApi from "@/api/orderApi.js";
import router from "@/router/index.js";

//服务器的地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
const route = useRoute();
//当前用户的所有地址信息
const addrList = ref([]);
//被选中的地址
const addrId = ref(null);
//当前用户选中的购物车
const cartList = ref([]);
//获取购物车的id
const cartIds = ref([]);
//总金额
const total = ref(0);

//生成订单
const createOrder = () => {
  //判断有没有默认地址
  if (!addrId.value) {
    ElMessage.error("请选择收货地址")
    return;
  }

  //已选择购物车的地址
  let orderVo = {
    addrId: addrId.value,
    cartIds: cartIds.value
  };

  //发送请求生成订单
  orderApi.insert(orderVo)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);

          //去支付界面
          router.push ({
            path: '/user/pay',
            query: {
              orderId : resp.data.orderId
            }
          })
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//查询当前用户的所有的地址
const getAddrList = ()=> {
  addrApi.selectByUser()
      .then(resp => {
        if (resp.code == 10000) {
          addrList.value = resp.data;
          for (let addr of addrList.value) {
            if (addr.status == 1) {
              addrId.value = addr.id;
            }
          }
        }else {
          ElMessage.error(resp.msg);
        }
      })
}

//查询当前用户已选中的购物车信息
const getCartList = () => {
  let ids
  if (route.query.cartIds instanceof Array) {
    ids = route.query.cartIds;
  }else {
    ids = [route.query.cartIds];
  }
  cartIds.value = ids;
  cartApi.selectByIds(ids)
      .then(resp => {
        if (resp.code == 10000) {
          cartList.value = resp.data;
          //计算总金额
          cartList.value.forEach(cart => {
            total.value += cart.count * cart.goods.price;
          })
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
getCartList();
getAddrList();
</script>

<style scoped>
.addrList ,.cartList, .footer {
  margin: 20px 0px;
  border: 2px solid #222;
  background-color: #ffffff;
  padding: 20px;
}

.footer {
  text-align: right;
}

.footer .createOrder {
  margin-left: 15px;
}
.footer .total {
  font-size: 18px;
  font-weight: bold;
  color: var(--theme-color);
}
.title {
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 18px;
}

.addrList ul li {
  margin: 10px 0px 10px 15px;
  height: 30px;
  line-height: 30px;
}

.addrList .contact {
  margin-right: 15px;
  display: inline-block;
  border: 2px solid #aaa;
  width: 80px;
  text-align: center;
  cursor: pointer;
}

.addrList .contact:hover {
  border: 2px solid var(--theme-color);
}
.addrList .selectAddr {
  border: 2px solid var(--theme-color);
}
</style>